<template>
	<view class="user-content">
		<uni-card :title="sConf.user?.nicename" :sub-title="sConf.user?.lasttime" extra="aaa" :thumbnail="avatar"
			@click="onClick">
			<view slot="actions" class="card-actions no-border">
				<text class="uni-body">这是一个带头像和双标题的基础卡片，此示例展示了一个完整的卡片。</text>
			</view>
			<!--
			<view slot="actions" class="card-actions no-border">
				<view class="card-actions-item" @click="actionsClick('分享')">
					<uni-icons type="pyq" size="18" color="#999"></uni-icons>
					<text class="card-actions-item-text">分享</text>
				</view>
				<view class="card-actions-item" @click="actionsClick('点赞')">
					<uni-icons type="heart" size="18" color="#999"></uni-icons>
					<text class="card-actions-item-text">点赞</text>
				</view>
				<view class="card-actions-item" @click="actionsClick('评论')">
					<uni-icons type="chatbubble" size="18" color="#999"></uni-icons>
					<text class="card-actions-item-text">评论</text>
				</view>
			</view> 
			-->
			<uni-collapse>
				<uni-collapse-item title="个人信息" :open="false">
					<uni-section class="mb-10" title="昵称" type="line" @click="inputDialogToggle('niceDialog')">
						<template v-slot:right>
							<text>{{sConf.user?.nicename}}</text>
						</template>
					</uni-section>
					<uni-section class="mb-10" title="真实姓名" type="line" @click="inputDialogToggle('nameDialog')">
						<template v-slot:right>
							<text>{{sConf.user?.basename}}</text>
						</template>
					</uni-section>
					<uni-section class="mb-10" title="性别" type="line" @click="inputDialogToggle('jobsDialog')">
						<template v-slot:right>
							<text>{{hasGender(sConf.user?.gender)}}</text>
						</template>
					</uni-section>
					<uni-section class="mb-10" title="身份证号" type="line" @click="inputDialogToggle('codeDialog')">
						<template v-slot:right>
							<text>{{sConf.user?.idcard}}</text>
						</template>
					</uni-section>
				</uni-collapse-item>
				<uni-collapse-item title="账户关联" :open="false">
					<uni-section class="mb-10" title="用户名" type="line">
						<template v-slot:right>
							<text>{{sConf.auth?.username}}</text>
						</template></uni-section>
					<uni-section class="mb-10" title="电子邮箱" type="line" @click="inputDialogToggle('mailDialog')">
						<template v-slot:right>
							<text>{{sConf.auth?.email}}</text>
						</template>
					</uni-section>
					<uni-section class="mb-10" title="手机号码" type="line" @click="inputDialogToggle('callDialog')">
						<template v-slot:right>
							<text>{{sConf.auth?.phone}}</text>
						</template>
					</uni-section>
					<uni-section class="mb-10" title="登录密码" type="line">
						<template v-slot:right>
							<uni-icons type="compose" size="18" @click="inputDialogToggle('pwsdDialog')"></uni-icons>
						</template>
					</uni-section>
				</uni-collapse-item>				
			</uni-collapse>
			<button type="primary" @click="logout">注销</button>
		</uni-card>

		<!-- 弹窗 -->
		<uni-popup ref="niceDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="input" title="昵称" value="sConf.user.nicename" placeholder="请输入昵称"
				@confirm="niceConfirm"></uni-popup-dialog>
		</uni-popup>
		<uni-popup ref="nameDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="input" title="真实姓名" value="sConf.user.basename"
				placeholder="请输入真实姓名" @confirm="nameConfirm"></uni-popup-dialog>
		</uni-popup>
		<uni-popup ref="jobsDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="base" :title="'当前性别: '+hasGender(sConf.user.gender)"
				content="请选择性别" confirmText="男" cancelText="女" placeholder="请选择性别" @confirm="jobsConfirm(1)"
				@close="jobsConfirm(0)"></uni-popup-dialog>
		</uni-popup>
		<uni-popup ref="codeDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="input" title="身份证号" value="sConf.user.idcard" placeholder="请输入身份证号"
				@confirm="codeConfirm"></uni-popup-dialog>
		</uni-popup>
		<uni-popup ref="mailDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="input" title="电子邮箱" value="sConf.auth.email" placeholder="请输入电子邮箱"
				@confirm="mailConfirm"></uni-popup-dialog>
		</uni-popup>
		<uni-popup ref="callDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="input" title="手机号码" value="sConf.auth.phone" placeholder="请输入手机号码"
				@confirm="callConfirm"></uni-popup-dialog>
		</uni-popup>
		<uni-popup ref="pwsdDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="input" inputType="password" title="登录密码" placeholder="请输入登录密码"
				@confirm="pwsdConfirm"></uni-popup-dialog>
		</uni-popup>
		<uni-popup ref="pwseDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="input" input-type="password" title="校验密码" placeholder="请输入登录密码"
				@confirm="pwseConfirm"></uni-popup-dialog>
		</uni-popup>
		<!-- 提示信息弹窗 -->
		<uni-popup ref="message" type="message">
			<uni-popup-message :type="msgType" :message="msgContent" :duration="2000"></uni-popup-message>
		</uni-popup>
		<!-- 提示窗示例 -->
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog :type="msgType" confirmText="确认" title="消息通知" :content="msgContent"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sConf: getApp().globalData,
				avatar: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png',
				msgType: 'success',
				msgContent: '',
				password: ''
			}
		},
		methods: {
			onClick(e) {
				console.log(e)
			},
			hasGender(e) { // 转换性别表达式
				return e ? "男" : "女";
			},
			inputDialogToggle(e) { // 弹出输入框	
				switch (e) {
					case "niceDialog":
						this.$refs.niceDialog.open();
						break;
					case "nameDialog":
						this.$refs.nameDialog.open();
						break;
					case "jobsDialog":
						this.$refs.jobsDialog.open();
						break;
					case "codeDialog":
						this.$refs.codeDialog.open();
						break;
					case "mailDialog":
						if (!this.sConf.auth.email) {
							this.$refs.mailDialog.open();
						}
						break;
					case "callDialog":
						if (!this.sConf.auth.phone) {
							this.$refs.callDialog.open();
						}
						break;
					case "pwsdDialog":
						this.$refs.pwsdDialog.open();
						break;
					case "pwseDialog":
						this.$refs.pwseDialog.open();
						break;
					default:
						break;
				}
			},
			niceConfirm(e) { // 修改昵称
				var name = e.trim();
				if (name.length < 1) {
					this.msgType = 'error';
					this.msgContent = '昵称不能为空';
					this.$refs.alertDialog.open();
					// this.$refs.message.open();
				} else {
					this.sConf.user.nicename = name;
					this.doPutUserInfo();
				}
			},
			nameConfirm(e) { // 修改真实姓名
				var name = e.trim();
				if (name.length < 1) {
					this.msgType = 'error';
					this.msgContent = '真实姓名不能为空';
					this.$refs.alertDialog.open();
					// this.$refs.message.open();
				} else {
					this.sConf.user.basename = name;
					this.doPutUserInfo();
				}
			},
			jobsConfirm(e) { // 修改性别
				this.sConf.user.gender = e;
				this.doPutUserInfo();
			},
			codeConfirm(e) { // 修改身份证号码	
				var name = e.trim();
				if (!this.validateIdCard(name)) {
					this.msgType = 'error';
					this.msgContent = '验证身份证号码失败';
					this.$refs.alertDialog.open();
					// this.$refs.message.open();
				} else {
					this.sConf.user.idcard = name;
					this.doPutUserInfo();
				}
			},
			mailConfirm(e) { // 修改邮箱
				var name = e.trim();
				if (!this.validateEmail(name)) {
					this.msgType = 'error';
					this.msgContent = '验证邮箱失败';
					this.$refs.alertDialog.open();
				} else {
					this.sConf.auth.email = name;
					this.doPutUserList();
				}
			},
			callConfirm(e) { // 修改电话
				var name = e.trim();
				if (!this.ValidPhoneNumber(name)) {
					this.msgType = 'error';
					this.msgContent = '验证手机号码失败';
					this.$refs.alertDialog.open();
				} else {
					this.sConf.auth.phone = name;
					this.doPutUserList();
				}
			},
			pwsdConfirm(e) { // 修改登录密码
				var name = e.trim();
				if (name.length < 1) {
					this.msgType = 'error';
					this.msgContent = '登录密码不能为空';
					this.$refs.alertDialog.open();
				} else {
					this.password = name;
					this.$refs.pwseDialog.open();
				}
			},
			pwseConfirm(e) { // 验证密码
				var name = e.trim();
				if (name.length < 1) {
					this.msgType = 'error';
					this.msgContent = '校验密码不能为空';
					this.$refs.alertDialog.open();
				} else if (name != this.password) {
					this.msgType = 'error';
					this.msgContent = '校验密码不匹配';
					this.$refs.alertDialog.open();
				} else {
					this.doPutPassWord(name);
				}
			},
			doPutUserList() { // 编辑账户信息
				var that = this;
				const requestTask = uni.request({
					url: that.sConf.host + '/user/UserList/' + that.sConf.auth.id + '/',
					method: 'PUT',
					header: {
						'content-type': 'application/json',
						'authorization': that.sConf.token
					},
					data: {
						// password: that.sConf.auth.password,
						email: that.sConf.auth.email,
						phone: that.sConf.auth.phone
					},
					success: function(res) {
						if (res.data.rescode == 200) {
							that.sConf.auth = res.data.resmsg
						} else {
							that.msgType = 'error';
							that.msgContent = res.data.resmsg;
							that.$refs.alertDialog.open();
						}
					}
				});
			},
			doPutUserInfo() { // 编辑用户信息
				var that = this;
				const requestTask = uni.request({
					url: that.sConf.host + '/user/UserInfo/' + that.sConf.user.id + '/',
					method: 'PUT',
					header: {
						'content-type': 'application/json',
						'authorization': that.sConf.token
					},
					data: {
						basename: that.sConf.user.basename,
						idcard: that.sConf.user.idcard,
						nicename: that.sConf.user.nicename,
						gender: that.sConf.user.gender
					},
					success: function(res) {
						if (res.data.rescode == 200) {
							that.sConf.user = res.data.resmsg
						} else {
							that.msgType = 'error';
							that.msgContent = res.data.resmsg;
							that.$refs.alertDialog.open();
						}
					}
				});
			},
			doPutPassWord(name) {
				var that = this;
				const requestTask = uni.request({
					url: that.sConf.host + '/user/pssword/' + that.sConf.auth.id + '/',
					method: 'PUT',
					header: {
						'content-type': 'application/json',
						'authorization': that.sConf.token
					},
					data: {
						password: name
					},
					success: function(res) {
						if (res.data.rescode == 200) {
							// that.sConf.auth = res.data.resmsg
						} else {
							that.msgType = 'error';
							that.msgContent = res.data.resmsg;
							that.$refs.alertDialog.open();
						}
					}
				});
			},
			validateIdCard(idCard) {
				// 验证身份证号码长度和格式
				if (idCard.length !== 15 && idCard.length !== 18) {
					return false;
				}
				// 验证身份证号码格式
				var reg = /(^\d{15}$)|(^\d{17}([0-9]|X)$)/;
				if (!reg.test(idCard)) {
					return false;
				}
				// 验证身份证号码的区域和生日
				var provinceCode = idCard.substr(0, 2); // 获取省份代码
				var birthday = idCard.substr(6, 8); // 获取出生日期
				// 其他相关验证...

				// 验证身份证校验位的正确性
				if (idCard.length === 18) {
					var lastChar = idCard.charAt(17); // 获取校验位字符
					// 其他相关验证...
				}
				return true;
			},
			validateEmail(email) {
				const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
				return emailRegex.test(email);
			},
			ValidPhoneNumber(phoneNumber) {
				return /^1[3-9]\d{9}$/.test(phoneNumber);
			},
			logout(){
				uni.$emit('logout',1);
			}
		}
	}
</script>

<style>
	.user-content {
		padding-top: var(--status-bar-height);
		padding-bottom: var(--status-bar-height);
		background-color: transparent;
	}

	.card-actions {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		height: 45px;
		border-bottom: 1px #eee solid;
	}
</style>